<template>
    <div>
        <transition name="fade">
            <div class="style-3" v-if="templateStyle ==='style-3'">
                <div class="course_common_box">
                    <div class="course-content">
                        <div class="picture">
                            <loadingImage :src="addPrefixHost(contentInfo.image)"/>
                        </div>
                        <ul class="content-word">
                            <li v-for="(item,index) in option" @click="getOption(item,index)">
                                <div class="inside" :class="activeIndex===index&&'active'">
                                    <div class="tb">
                                        {{item.english || item.chinese}}
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <div class="sentence">
                            <ul class="sentence-option">
                                <li v-for="item in contentInfo.questions"
                                    v-html="getHtml(item)"
                                    @click="setOption($event)"
                                >
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
    import {mapState, mapActions} from 'vuex';
    import loadingImage from '~/components/loadingImage';
    import R from 'ramda';
    import Vue from 'vue';

    export default {
        async fetch({store, params, isServer, redirect}) {
            (isServer || !params) && redirect("/learner/myCourse");
            params.extendData || await store.dispatch("index/course/index/setContentInfo", params);
        },
        asyncData({params}) {
            return {extendData: params.extendData}
        }, data() {
            return {
                answerArr: [],
                activeIndex: null,
                activeItem: null,
                toIndex: null,
                isUpdate: false,
                correctArr: [],
                errorMessage: ""
            }
        },
        methods: {
            ...mapActions('index/course/index', [
                'setAnswer'
            ]),
            getHtml(item) {
                let obj = item;
                let words = this.contentInfo ? this.contentInfo.answerWords : '';
                if (obj && obj.length) {
                    const re = /([^\[\]]+)(?=\])/g;
                    let arr = obj.match(re);
                    if (arr) {
                        for (let i = 0; i < arr.length; i++) {
                            if (arr[i] % arr[i] === 0) {
                                let key = this.answerArr[arr[i] - 1] || '';
                                obj = obj.replace(/\[.]、?/, "<div class='l3-gap' data-name='" + (arr[i] - 1) + "'><div class='inside' data-name='" + (arr[i] - 1) + "'><div class='tb' data-name='" + (arr[i] - 1) + "'>" + (key.english || '') + "</div></div></div>");
                            }
                        }
                    }
                    return obj;
                }
            },
            setOption(e) {
                if (e.target.nodeName.toUpperCase() === "DIV" && (e.target.className === "l3-gap" || e.target.className === "inside" || e.target.className === "tb")) {
                    let target = e.target;
                    this.toIndex = target.getAttribute("data-name");
                    if (this.activeItem != null) {
                        if (!this.answerArr[this.toIndex]) {
                            Vue.set(this.answerArr, this.toIndex, this.activeItem);
//                            this.option.splice(this.activeIndex, 1);
                            this.activeItem = null;
                            this.activeIndex = null;
                        } else {
//                            this.option.splice(this.activeIndex, 1);
//                            this.option.push(this.answerArr[this.toIndex]);
                            Vue.set(this.answerArr, this.toIndex, this.activeItem);
                            this.activeItem = null;
                            this.activeIndex = null;
                        }
                    } else {
//                        if (this.answerArr[this.toIndex]) {
//                            this.option.push(this.answerArr[this.toIndex]);
//                        }
                        Vue.set(this.answerArr, this.toIndex, "");
                    }
                    this.Answer(this.toIndex);
                }
            },
            getOption(item, index) {
                this.activeIndex = index;
                this.activeItem = item;
            },
            Answer(Index) {
                let answer = false;
                Vue.set(this.correctArr, Index, this.answerArr[Index].order);
                if (this.contentInfo.answerOrder) {
                    for (let i = 0; i < this.contentInfo.answerOrder.length; i++) {
                        if (this.correctArr.toString() === this.contentInfo.answerOrder[i]) {
                            answer = true;
                        }
                    }
                }
                this.setAnswer({
                    answer: answer,
                    msg: this.errorMessage
                });
            }
            ,
            init() {
                this.$nextTick(_ => {
                    if (this.contentInfo.answerOrder) {
                        for (let i = 0; i < this.contentInfo.answerOrder.length; i++) {
                            const orderArr = this.contentInfo.answerOrder[i] && this.contentInfo.answerOrder[i].split(",");
                            if (orderArr) {
                                for (let j = 0; j < orderArr.length; j++) {
                                    if (this.contentInfo.answerWords) {
                                        for (let k = 0; k < this.contentInfo.answerWords.length; k++) {
                                            if (this.contentInfo.answerWords[k].order === orderArr[j]) {
                                                this.errorMessage += (j + 1) + "." + this.contentInfo.answerWords[k].english + "<br>";
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                    this.setAnswer({
                        answer: false,
                        msg: this.errorMessage
                    });
                })
            }
        },
        created() {

        },
        mounted() {
            this.init();
        },
        watch: {
            contentInfo() {
//                当数据发生变化后执行动画效果
                this.isUpdate = true;
                const initData = {
                    answerArr: [],
                    activeIndex: null,
                    activeItem: null,
                    toIndex: null,
                    isUpdate: false,
                    correctArr: [],
                    errorMessage: ""
                };
                const init = (val, key) => {
                    this[key] = val;
                };
                R.forEachObjIndexed(init)(initData);
                setTimeout(_ => {
                    this.isUpdate = false;
                }, 600);
                this.init();
            },
        },
        computed: {
            option() {
                const arr = [];
                if (this.contentInfo.answerWords) {
                    for (let i = 0; i < this.contentInfo.answerWords.length; i++) {
                        arr.push(this.contentInfo.answerWords[i]);
                    }
                }
                return arr.sort(function () {
                    return Math.random() - 0.5
                });
            },
            contentInfo() {
                return this.courseExtendInfo || this.extendData || this.contentData;
            },
            ...mapState('index/course/index', {
                courseExtendInfo: state => state.courseExtendInfo,
                contentData: state => state.contentInfo.content,
                templateStyle: state => state.templateStyle
            }),
        },
        components: {
            loadingImage,
        }
    }
</script>
<style lang="less">
    .style-3 {
        .l3-gap {
            display: inline-block;
            width: 1.2rem;
            background: #681515;
            border-left: 2px solid #901D1C;
            border-bottom: 2px solid #901D1C;
            box-shadow: -3px 5px 20px black inset;
            box-sizing: border-box;
            color: white;
            vertical-align: middle;
            cursor: pointer;
            font-size: 22px;
            padding: 0 .02rem;
            margin: 8px 5px;
            text-align: center;
            .inside {
                display: table;
                width: 100%;
                min-height: .44rem;
            }
        }
    }
</style>
<style lang="less" scoped>

    .style-3 {

        .course_common_box {
            text-align: center;

            .course-content {
                display: inline-block;
                position: relative;
            }
            .content-word {
                margin-bottom: 20px;
                min-height: 51px;
                li {
                    vertical-align: top;
                    display: inline-block;
                    width: 1.2rem;
                    padding: 0.03rem;
                    box-sizing: border-box;
                    background: #BE2C23;
                    font-size: 0.22rem;
                    /* line-height: 0.42rem; */
                    color: white;
                    background: linear-gradient(#B43C0B 0, #901D1C 90%);
                    cursor: pointer;
                    margin: 0 10px;
                    .inside {
                        width: 100%;
                        min-height: .44rem;
                        border: 0.01rem solid #FB984B;
                        -webkit-box-sizing: border-box;
                        box-sizing: border-box;
                        display: table;
                        &.active {
                            background: linear-gradient(#901D1C 0, #D9151B 90%);
                        }
                    }
                }
            }
            .picture, .sentence {
                display: inline-block;
                vertical-align: middle;

            }
            .sentence {
                font-size: 22px;
                text-align: left;
                max-width: 7.5rem;
            }
            .picture {
                margin-right: 20px;
                position: absolute;
                right: 110%;
                top: 50%;
                transform: translate(0, -50%);
                img {
                    max-width: 2.2rem;
                    max-height: 3.5rem;
                }
            }

        }

    }
</style>
